<template>
  <!-- 充值-->
  <el-dialog
    v-el-drag-dialog
    title="充值"
    :visible.sync="visible"
    width="70%"
    min-width="1024px"
    append-to-body
    @close="reset"
  >
    <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">卡信息</span>
      </div>
      <el-descriptions size="medium">
        <el-descriptions-item label="客户编号">{{ csmInfo.csmCode }}</el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ csmInfo.csmName }}</el-descriptions-item>
        <el-descriptions-item label="绑定手机号">{{ csmInfo.csmPhone }}</el-descriptions-item>
        <el-descriptions-item label="卡号">{{ csmInfo.cardCode }}</el-descriptions-item>
        <el-descriptions-item label="开卡日期">{{ csmInfo.startDt ? parseTime(csmInfo.startDt, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
        <el-descriptions-item label="卡余额">{{ numberFormat1(csmInfo.cardSurplus) }}</el-descriptions-item>
        <el-descriptions-item label="现金卡值">{{ numberFormat1(csmInfo.cashMoney) }}</el-descriptions-item>
        <el-descriptions-item label="赠送卡值">{{ numberFormat1(csmInfo.sendMoney) }}</el-descriptions-item>
        <el-descriptions-item label="最后交易时间">{{ csmInfo.lastPayTime ? parseTime(csmInfo.lastPayTime, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
        <el-descriptions-item label="储值累计">{{ numberFormat1(csmInfo.totalCardMoney) }}</el-descriptions-item>
        <el-descriptions-item label="消费累计">{{ numberFormat1(csmInfo.totalPayMoney) }}</el-descriptions-item>
        <el-descriptions-item label="消费次数">{{ csmInfo.totalPayCount }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="item">
      <div class="title">
        <span class="title-icon" />
        <span class="title-text">其他信息</span>
      </div>
    </div>
    <div class="item">
      <el-tabs v-model="activeName" style="min-height: 200px;" type="card" @tab-click="tabsClick">
        <el-tab-pane lazy label="交易明细" name="info">
          <div>
            <el-table-form ref="form">
              <el-form-item label="充值日期:" :table-form-merge="2">
                <el-date-picker
                  v-model="date"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  unlink-panels
                />
              </el-form-item>
              <el-form-item label="交易类型:">
                <el-select v-model="query.optFlag">
                  <el-option
                    v-for="i in dealMap"
                    :key="i.value"
                    :label="i.desc"
                    :value="i.value"
                  />
                </el-select>
              </el-form-item>
              <template v-slot:btns>
                <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
              </template>
            </el-table-form>
          </div>
          <iframe :src="iframeUrl" width="1200" height="300" frameborder="0" scrolling="auto" />
        </el-tab-pane>
        <el-tab-pane lazy label="卡日志" name="cradLog">
          <lb-table
            ref="lbTable"
            v-loading="$loadingPlugin.fetchData"
            v-el-height-adaptive-table="{bottomOffset:10}"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="column"
            :data="tableData.data"
            pagination
            :immediate-fetch="false"
            :total="tableData.total"
            custom-column
            @fetch="fetchData"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { topUpAdministrationInfoStatement, topUpAdministrationInfoQuery } from '@/api'
  import { parseTime, formatColumnMap } from '@/utils'

  export default {
    name: 'top-up',
    components: {
    },
    props: {
      dealMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        parseTime,
        visible: false,
        activeName: 'info',
        iframeUrl: null,
        date: [],
        query: {
          cardCode: '',
          optFlag: ''
        },
        csmInfo: {},
        statusMap: {}, // 状态枚举
        tableData: {
          total: 0,
          data: []
        },
        // 充值
        cols1: [
          {
            prop: 'feeCount1',
            label: '本次充值金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '本次充值赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '本次充值前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '本次充值后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '充值备注'
          }
        ],
        // 消费
        cols2: [
          {
            prop: 'feeCount1',
            label: '本次消费金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '本次消费赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '本次消费前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '本次消费后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '消费备注'
          }
        ],
        // 销卡
        cols3: [
          {
            prop: 'feeCount1',
            label: '销卡退款金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount3',
            label: '销卡前卡余额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '销卡后卡金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '销卡退款备注'
          }
        ],
        // 换卡
        cols5: [
          // {
          //   prop: 'feeCount',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.feeCount && this.numberFormat1(row.feeCount) }</span>
          // },
          // {
          //   prop: 'sendCount3',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.sendCount3 && this.numberFormat1(row.sendCount3) }</span>
          // },
          // {
          //   prop: 'cashCount3',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.cashCount3 && this.numberFormat1(row.cashCount3) }</span>
          // },
          // {
          //   prop: 'feeCount4',
          //   label: '换卡',
          //   render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          // },
          {
            prop: 'remark',
            label: '换卡'
          }
        ],
        // 充值调账
        cols13: [
          {
            prop: 'feeCount1',
            label: '充值调账现金金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '充值调账赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '充值调账前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '充值调账后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '充值调账备注'
          }
        ],
        // 消费调账
        cols14: [
          {
            prop: 'feeCount1',
            label: '消费调账现金金额',
            render: (h, { row }) => <span>{ row.feeCount1 && this.numberFormat1(row.feeCount1) }</span>
          },
          {
            prop: 'feeCount2',
            label: '消费调账赠送金额',
            render: (h, { row }) => <span>{ row.feeCount2 && this.numberFormat1(row.feeCount2) }</span>
          },
          {
            prop: 'feeCount3',
            label: '消费调账前金额',
            render: (h, { row }) => <span>{ row.feeCount3 && this.numberFormat1(row.feeCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '消费调账后金额',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '消费调账备注'
          }
        ],
        // 退款
        cols16: [
          {
            prop: 'feeCount',
            label: '退款',
            render: (h, { row }) => <span>{ row.feeCount && this.numberFormat1(row.feeCount) }</span>
          },
          {
            prop: 'sendCount3',
            label: '退款',
            render: (h, { row }) => <span>{ row.sendCount3 && this.numberFormat1(row.sendCount3) }</span>
          },
          {
            prop: 'cashCount3',
            label: '退款',
            render: (h, { row }) => <span>{ row.cashCount3 && this.numberFormat1(row.cashCount3) }</span>
          },
          {
            prop: 'feeCount4',
            label: '退款',
            render: (h, { row }) => <span>{ row.feeCount4 && this.numberFormat1(row.feeCount4) }</span>
          },
          {
            prop: 'remark',
            label: '退款'
          }
        ]
      }
    },
    computed: {
      column: function() {
        return [
          {
            type: 'expand',
            render: (h, { row }) => {
              return (
                <div>
                  <lb-table
                    ref='lbTable'
                    border
                    element-loading-text='加载中'
                    column={ row.optFlag && row.optFlag === 1 ? this.cols1 : row.optFlag === 2 ? this.cols2 : row.optFlag === 5 ? this.cols5 : row.optFlag === 3 ? this.cols3 : row.optFlag === 13 ? this.cols13 : row.optFlag === 14 ? this.cols14 : this.cols16 }
                    data={row.detailList}
                    pagination={false}
                  />
                </div>
              )
            }
          },
          {
            prop: 'createTime',
            label: '时间',
            render: (h, { row }) => <span>{ row.createTime && parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }</span>
          },
          {
            prop: 'optFlag',
            label: '类型',
            render: (h, { row }) => <span>{ row.optFlag && formatColumnMap(this.dealMap, 'value', row.optFlag, 'desc') }</span>
          },
          {
            prop: 'operatorName',
            label: '操作员'
          },
          {
            prop: 'orgName',
            label: '操作机构'
          }
        ]
      }
    },
    created() {},
    methods: {
      async open(temp) {
        this.query.cardCode = temp.cardCode
        await Promise.all([this.search()])
        return new Promise(resolve => {
          if (temp) {
            this.csmInfo = temp
            this.resolve = resolve
            this.visible = true
          }
        })
      },
      tabsClick(val) {
        if (val.paneName === 'cradLog') {
          this.$nextTick(() => {
            this.$refs.lbTable.fetch()
          })
        }
      },
      // 查询
      async search() {
        const params = {
          ...this.query
        }
        if (this.date && this.date.length === 2) {
          params.startTime = parseTime(this.date[0], '{y}-{m}-{d} {h}:{i}:{s}')
          params.endTime = parseTime(this.date[1], '{y}-{m}-{d} {h}:{i}:{s}')
        } else {
          params.startTime = ''
          params.endTime = ''
        }
        if (!this.query.optFlag) {
          params.optFlag = this.dealMap.map(l => l.value).join(',')
        }
        const res = await topUpAdministrationInfoStatement(params)
        this.iframeUrl = res.data
      },
      reset() {
        this.csmInfo = {}
        this.date = []
        this.tableData = {
          total: 0,
          data: []
        }
        this.activeName = 'info'
        this.query = {
          cardCode: '',
          optFlag: ''
        }
        this.visible = false
      },
      async fetchData({ currentPage, pageSize }) {
        const res = await topUpAdministrationInfoQuery({
          qtype: 'cardCode',
          param: this.query.cardCode,
          pageIndex: currentPage,
          pageSize
        })
        res.data.rows.map(item => {
          return item.detailList = [item]
        })
        this.tableData.data = res.data.rows
        console.log('this.cols', this.tableData.data)
        if (currentPage === 1) this.tableData.total = res.data.total
      },
      // 充值金额
      numberFormat1: function(val) {
        val = val * 1.00 / 100
        val = Number(val)
        val = isNaN(val) ? '0.00' : val.toFixed(2)
        return val + '元'
      }
    }
  }
</script>

<style lang="scss" scoped>
.item {
  margin-bottom: 30px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .content {
    margin-bottom: 30px;
  }
}
</style>
